// import dark theme
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
@import './mixin.scss';
@import './common.scss';

:root {
  // 底部授权信息高度
  --zs-auth-footer-height: 30px;
  // tabs高度
  --zs-custom-tabs-height: 40px;
  // nav-bar高度
  --zs-custom-nav-height: 50px;
  // --zs-menu-hover-bg-color: var(--zs-color-primary) !important;
  // --zs-menu-bg-color: #141414 !important;
  // --zs-menu-text-color: #f3f3f8 !important;
  // --zs-menu-active-color: #fff !important;
  --custom-menu-bg-color: var(--zs-bg-color);
  --custom-menu-text-color: var(--zs-text-color-primary);
}
html,
body {
  font-family: Inter, system-ui, Avenir, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.aside-btn{
  // z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1px;
}
.aside-btn-icon:hover{
  background-color: var(--zs-color-info-light-7);
  border-radius: 20px;
  padding: 15px 0;
  margin: 0;
  cursor: pointer;
}
a {
  color: var(--zs-color-primary);
}

code {
  border-radius: 2px;
  padding: 2px 4px;
  background-color: var(--zs-color-primary-light-9);
  color: var(--zs-color-primary);
}

.zs-button:focus-visible{
  outline: none !important;
}
// 抽屉
.zs-drawer {
  .zs-drawer__header{
    color: var(--zs-text-color-primary);
    margin-bottom: 0;
    border-bottom: 1px solid var(--zs-border-color);
    background-color: var(--zs-bg-color);
    font-weight: var(--zs-font-weight-primary);
    padding: 15px !important;

    .zs-drawer__title{
      font-weight: bold;
      font-size: var(--zs-font-size-large);
    }
  }
  .zs-drawer__footer{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid var(--zs-border-color);
    padding: 10px 20px !important;
  }
}

.zs-table {
  --zs-table-text-color: var(--zs-text-color-regular) !important;
  --zs-table-header-bg-color: var(--zs-fill-color-light) !important;
  --zs-table-header-text-color: var(--zs-text-color-primary) !important;
}

.zs-dialog {
  padding: 0 !important;

  .zs-dialog__header{
    padding: var(--zs-dialog-padding-primary);
    border-bottom: 1px solid var(--zs-border-color) !important;
  }
  .zs-dialog__body{
    padding: var(--zs-dialog-padding-primary);
  }
  .zs-dialog__footer{
    padding: var(--zs-dialog-padding-primary);
    border-top: 1px solid var(--zs-border-color) !important;
  }
}

.zs-dialog.is-fullscreen{
  .zs-dialog__header{
    height: 40px;
  }
  .zs-dialog__body{
    height: calc(100vh - 100px - 32px);
  }
  .zs-dialog__footer{
    height: 60px;
    position: fixed;
    width: 100%;
    padding: var(--zs-dialog-padding-primary) 20px;
    bottom: 0;
    right: 0;
    // border-top: 1px solid var(--zs-border-color);
  }
}
.zs-footer{
  --zs-footer-padding: 0 10px !important;
}

.zs-pagination{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}


// 暗黑模式下的样式
html.dark {
  --zs-bg-color: #141414;
  --zs-aside-bg-color: #141414;
  --w-e-textarea-bg-color: #333;
  --w-e-textarea-color: #fff;
  
}
// 启用模式下样式
html.light {
  
  --zs-menu-bg-color: var(--custom-menu-bg-color) !important;
  --zs-menu-text-color: var(--custom-menu-text-color) !important;
  --zs-menu-active-color: var(--zs-color-primary-dark-2);
  --zs-menu-hover-text-color: var(--zs-color-primary);
  --zs-menu-hover-bg-color: var(--zs-color-primary-light-5);

}
